<template>
	<view class="goods-list-container">
		<uni-grid  v-if="list.children.length>0" :column="3" :showBorder="false" :square="false" :highlight="false">
			<uni-grid-item v-for="(item,index) in list.children" :key="index" class="uni-grid-item-wrap">
				<view class="item" @click="currentClick(item,index)">
					<!-- {{item}} -->
					<view class="image-wrap">
						<image class="image" mode="widthFix" v-if="item.image" :src="info.app.cdnurl+item.image" />
					</view>
					<!-- http://192.168.2.94/uploads/20240726/01cb45f824705fa5859503a2b7f75b20.png -->
					<view class="title-wrap">{{item.name}}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<no-data v-else description="暂无该类别数据~~" padding="100rpx 0"></no-data>
	</view>
</template>

<script>
	import noData from "./no-data/index.vue"
	export default {
		// shared:表示页面 wxss 样式将影响到自定义组件
		options: {
			styleIsolation: 'shared'
		},
		components: {
			noData
		},
		props: {
			// 当前选中内容区域的下标
			activeIndex: {
				type: Number,
				default: 0
			},
			list:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {}
		},
		computed: {
		
		},
		mounted() {},
		methods: {
			currentClick(item,index){
				console.log(item,index)
				uni.navigateTo({
					url:`/templatePage/coupon/demo2/demo2?id=${item.id}`
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list-container {
		position: relative;
		display: block;
		// background-color: #fff;

		.item {
			margin-bottom: 24rpx;
			display: flex;
			position: relative;
			flex-direction: column;
			align-items: center;
			padding: 0 24rpx;
			box-sizing: border-box;

			.image-wrap {
				display: flex;
				align-items: center;
				justify-content: center;
				// background: #fafafa;
				width: 140rpx;
				height: 140rpx;
				border-radius: 6px;
				flex-shrink: 0;

				.image {
					will-change: transform;
					width: 84rpx;
					height: 84rpx;
				}
			}

			.title-wrap {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #787878;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 150rpx;
				text-align: center;
			}
		}
	}
</style>